<html>
	<head>
		<link rel='shortcut icon' type='image/x-icon' sizes='192x192' href='/android-192.png'>
		<link rel='icon' type='image/png' sizes='192x192' href='/android-192.png'>
		<link rel='apple-touch-icon' sizes='180x180' href='/apple-180.png'>
		<meta http-equiv='content-type' content='text/html;charset=utf-8' />

		<title>Example 07 - logout</title>

		<style>

			h1 {
				font-family:verdana;
				font-size:40px;
				text-align:center;
			}
    
  
			/* button */
			.button {padding: 10px 15px; font-size: 22px;text-align: center; cursor: pointer; outline: none; color: white; border: none; border-radius: 12px; box-shadow: 1px 1px #ccc; position: relative; top: 0px; height: 42px}
			button:disabled {background-color: #aaa}
			button:disabled:hover {background-color: #aaa}
      		/* blue button */
      		.button1 {background-color: hsl(207, 90%, 40%) }
      		.button1:hover {background-color: hsl(207, 90%, 30%) }
      		.button1:active {background-color: hsl(207, 90%, 30%); transform: translateY(3px)}

			/* div grid */
			div.d1 {
				position:relative;
				overflow:hidden;
				width:100%;
				font-family:verdana;
				font-size:30px;
				color:gray;
			}
			div.d2 {
				position:relative;
				float:left;
				width:75%;
				font-family:verdana;
				font-size:22px;
				color:gray;
				text-align: right;
			}
			div.d3 {
				position:relative;
				float:left;
				width:25%;
				font-family:verdana;
				font-size:30px;
				color:black;
			}

			dialog[open] {
				font-family: verdana; 
				font-size: 28px; 
				color: white;
				background-color:rgb(200 0 0 / 0.90);
				border: solid rgb(200 0 0 / 0.90) 0px;
				border-radius: 12px;
				/*
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				*/
			}

		</style>

		<script type='text/javascript'>

			// mechanism that makes REST calls and get their replies
			var httpClient = function () {
				this.request = function (url, method, callback) {
					var httpRequest = new XMLHttpRequest ();
					var httpRequestTimeout = null;
					
					httpRequest.onreadystatechange = function () {
						// console.log (httpRequest.readyState);
						if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
							clearTimeout (httpRequestTimeout);
							httpRequestTimeout = setTimeout (function () { 
								// alert ('Server did not reply (in time).'); 
								errorMessage ('Server did not reply (in time).');
							}, 5000);
						}
						if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
							clearTimeout (httpRequestTimeout);
							switch (httpRequest.status) {
								case 200: 	callback (httpRequest.responseText); // 200 = OK
											break;
								case 0:		break;
								default: 	// alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
											errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
											break;
							}
						}
					}
					httpRequest.open (method, url, true);
					httpRequest.send (null);
				}
			}

			// error message
			var errorMessageTimeout = null;
			function errorMessage (msg) {
				clearTimeout (errorMessageTimeout);
				document.getElementById ('errDialog').textContent = msg;
				document.getElementById ('errDialog').showModal ();
				errorMessageTimeout = setTimeout (function () {
					document.getElementById ('errDialog').close ();
				}, 3000);				
			}

		</script>

	</head>
<body>

	<h1>Example 07 - protected page with logout option</h1>
	<br>

	<!-- error message -->
	<dialog id="errDialog"></dialog>

	<div class='d1'>&nbsp;This page is only accessible to the logged-in users.</div>
	<br><br>
	<div class='d1'>&nbsp;{Place your protected contet here.}</div>
	<br><br>
	<br><br>

	<div class='d1' style='height: 50px;'>
		<div class='d2'>Place the logout option somewhere →&nbsp;&nbsp;&nbsp;</div>
		<div class='d3'> 
			<button class='button button1' id='logoutButton' onclick="doLogout ()">&nbsp;Logout&nbsp;</button>
		</div>
	</div>

</body>

	<script type='text/javascript'>

		function doLogout () {
			var client = new httpClient ();
			var clientRequest = 'logout';
			client.request 	(clientRequest, 'PUT', function (serverReply) 	{
																				window.location.href = "/login.html";
										      								});
		}

	</script>

</html>
